<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.min.js"></script>
    <script>
        window.onload = function () {
            getData();
        }
        function $(id) {
            return document.getElementById(id);
        }
        function checkUserName() {
            axios.get("user/checkName",{
                params: {
                   userName:$("name").value
                }
            }).then(resp=>{
                var str = resp.data;
                if (str=="ok"){
                    $("nameSpan").innerHTML="用户以存在";
                    $("nameSpan").style.color="red";
                }else {
                    $("nameSpan").innerHTML="可以";
                    $("nameSpan").style.color="green";
                }
            });
        }
        function getData() {
            axios.get("user/getList").then(resp=>{
                var info = resp.data;
                var str = "";
                info.forEach(n=>{
                    str+=`<tr><td>${n.id}</td><td>${n.name}</td><td>${n.birthday}</td></tr>`;
                });
                $("data").innerHTML=str;
            })
        }
    </script>
</head>
<body>
<input type="text" id="name" onblur="checkUserName()">
<span id="nameSpan"></span><br>
<input type="text" id="pwd" onblur="">
<table border="1" width="80%" cellspacing="0">
    <thead><tr><th>编号</th><th>姓名</th><th>生日</th></tr></thead>
    <tbody id="data"></tbody>
</table>
</body>
</html>